<template>
    <div>
        <!-- 导航 -->
        <Nav/>
        <div class="search-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-lg-1 filter-title">
                        品 牌：
                    </div>
                    <div class="col-lg-11 filter-list">
                        <span class="active">不限</span>
                        <span>别克</span>
                        <span>雪佛兰</span>
                        <span>福特</span>
                        <span>奔驰</span>
                        <span>宝马</span>
                        <span>奥迪</span>
                        <span>长城</span>
                        <span>红旗</span>
                        <span>力帆</span>
                        <span>野马</span>
                        <span>日产</span>
                        <span>比亚迪</span>
                        <span>奇瑞</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-1 filter-title">
                        车 系：
                    </div>
                    <div class="col-lg-11 filter-list">
                        <span class="active">不限</span>
                        <span>福克斯</span>
                        <span>凯越</span>
                        <span>捷达</span>
                        <span>科鲁兹</span>
                        <span>五菱之光</span>
                        <span>北斗星</span>
                        <span>五菱荣光</span>
                        <span>奥迪A6L</span>
                        <span>比亚迪F3</span>
                        <span>迈腾</span>
                        <span>帕萨特</span>
                        <span>长安之星2</span>
                        <span>世嘉</span>
                        <span>哈弗H6</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-1 filter-title">
                        价 格：
                    </div>
                    <div class="col-lg-11 filter-list">
                        <span class="active">不限</span>
                        <span>3万以下</span>
                        <span>3-5万</span>
                        <span>5-10万</span>
                        <span>10-15万</span>
                        <span>15-20万</span>
                        <span>20-25万</span>
                        <span>30-35万</span>
                        <span>35万以上</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-1 filter-title">
                        更 多：
                    </div>
                    <div class="col-lg-11 filter-list">
                        <div>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                            <Dropdown :onSelect="yo" :cheling="temp"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 产品列表 -->
        <div class="index-car-list-wrapper">
            <div class="container">
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1ch03pfd4453543621926737325953950.jpg" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1cgvlclhl2213029548141234757849005.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp"
                            alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1ch0hjrgv1676530928504212405341661.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp"
                            alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1ch0fgc8j191486521205595588420413.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp"
                            alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1ce68ia0h5271439212132923051826059.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp"
                            alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1cge6p1du6088752848174423750338332.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp"
                            alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1cfpfmnk2590143383443279266149267.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp"
                            alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1cfkh078v26743146813910574566459.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp"
                            alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>

            </div>
        </div>
        <!-- 页脚 -->
        <Footer/>
    </div>
</template>

<script>

    import Nav from '../components/Nav.vue';
    import Dropdown from '../components/Dropdown.vue'
    import Footer from '../components/Footer.vue'

    export default {
        components: {
            Nav,
            Footer,
            Dropdown
        },
        data() {
            return {
                temp:[{'name':'不限','id':1},{'name':'一年以内','id':2},{'name':'两年以内','id':2},],
                yo:function(item){
                    alert(item.name);
                }
            }
        }
    }

</script>

<style scoped>
    body {
        background-color: #F2F2F3;
    }

    .index-buy-sales-wrappe {
        background-color: white;
    }

    .col-lg-10 div:first {
        margin-top: 20px;
    }

    .col-lg-10 div>span {
        display: inline-block;
        padding: 10px;
        padding-top: 15px;
        font-size: .8rem;
    }

    .mu-carousel {
        height: 350px;
    }

    .maiche {
        margin: 10% 0;
    }

    .maiche input {
        width: 200px;
        padding: 10px;
    }

    .maiche button {
        padding: 10px;
        margin-top: 10px;
        width: 200px;
    }

    .firstmai {
        margin-top: 15px;
    }

    .firstmai+div {
        font-size: 13px;
        margin-top: 5px;
        color: #7e7b7b;
    }

    .towmai {
        margin-top: 15px;
    }

    .model {
        margin: 20px;
        background-color: white;
        width: 95%;
        height: 250px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }

    .model-title,
    .model-time {
        text-align: center;
    }

    .model-title {
        padding: 10px;
        font-size: 20px;
    }

    .model-time {
        font-size: 14px;
        color: rgb(114, 113, 113);
    }

    .model-img {
        width: 190px;
        height: 153px;
        margin: 0 auto;
    }

    .index-car-list-wrapper {
        background-color: white;
        overflow: hidden;
    }

    .list-card {
        width: 25%;
        padding: 10px;
        /* padding-left: 10px; */
        /* padding-right: 0; */
        border: 1px solid #fff;
        margin-top: 10px;
        margin-bottom: 10px;
        float: left;
    }

    .list-card:hover {
        border: 1px solid orangered;
    }

    .list-card .title {
        margin-top: 10px;
        overflow: hidden;
    }

    .list-time {
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 12px;
        color: #9e9e9e;
    }

    .list-money-qian {
        font-size: 23px;
        color: orangered;
    }

    .list-money-wan {
        font-size: 14px;
        color: orangered;
        margin-right: 10px;
    }

    .list-money-shoufu {
        font-size: 14px;
        color: #9e9e9e;
    }

    .buy {
        text-align: right;
    }

    .search-wrapper .container {
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: white;
        padding: 10px;
    }

    .search-wrapper .container .row {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .search-wrapper .container .row:first-child {
        border-top: 0;
    }

    .search-wrapper .container .row>* {
        padding: 10px;
        font-size: 14px;
    }

    .filter-title {
        text-align: right;
    }

    .filter-list {
        text-align: left;
    }

    .filter-list span {
        margin-left: 10px;
        margin-right: 10px;
    }

    .active {
        background-color: orangered;
        color: white;
        padding: 3px 7px;
    }
</style>